<template>
	<view class="flex column space-between record width-full">
		<view class="paddingTop-20 userTitle flex box-sizing  space-between items-center">
			<view class="box-sizing paddingLeft-30">
				<u-icon @click="uni.navigateBack()" name="arrow-left" :size="25"></u-icon>
			</view>
			<view  style="margin-left: calc(0px - 20px - 15rpx );"
				class=" flex box-sizing  flex-center items-center height-full">
				<view class="fontSize-31 weight-700 marginRight-10 text-hidden">
					{{ stuentInfo.name }} - 缴费列表
				</view>
			</view>
			<view class=""></view>
		</view>
		<view class="crads  ">
			<swiper :current="current" circular class="swiper " @change="swiperChange" style="width: 100%;">
				<swiper-item class=" flex ">
					<scroll-view :refresher-triggered="triggered['0']" scroll-y="true"
						class="swiperItem flex column items-center box-sizing padding-30" refresher-enabled
						@refresherrefresh="scrolltoupper()">
						<view v-for="(card, index) in pxrec" :key="index"
							class="color-f6ffff card box-sizing padding-20 fontSize-27 borderRadius-10 marginBottom-30">
							<view class="flex marginBottom-10 fontSize-27 color-6d6d6d">
								<view class="label flex items-center">
									学员姓名:
								</view>
								<view class="contentText">
									{{ card.student&&card.student.name?card.student.name:'' }}
								</view>
							</view>
							<view  v-if="card.pay_time" class="flex marginBottom-10 fontSize-27 color-6d6d6d">
								<view class="label flex items-center">
									缴费时间:
								</view>
								<view class="contentText">
									{{ card.pay_time }}
								</view>
							</view>
							<view v-if="card.amount" class="flex marginBottom-10 fontSize-27 color-6d6d6d">
								<view class="label flex items-center">
									缴费金额:
								</view>
								<view class="contentText">
									{{ card.amount }}
								</view>
							</view>
							<view v-if="card.commission" class="flex marginBottom-10 fontSize-27 color-6d6d6d">
								<view class="label flex items-center">
									手续费:
								</view>
								<view class="contentText">
									{{ card.commission }}
								</view>
							</view>
							<view v-if="card.financeaccount&&card.financeaccount.name" class="flex marginBottom-10 fontSize-27 color-6d6d6d">
								<view class="label flex items-center">
									收款账号:
								</view>
								<view class="contentText">
									{{ card.financeaccount&&card.financeaccount.name?card.financeaccount.name:'' }}
								</view>
							</view>
							<view v-if="card.payway_name" class="flex marginBottom-10 fontSize-27 color-6d6d6d">
								<view class="label flex items-center">
									缴费方式:
								</view>
								<view class="contentText">
									{{ card.payway_name?card.payway_name:'' }}
								</view>
							</view>
							<!-- <view v-if="card.amount" class="flex marginBottom-10 fontSize-27 color-6d6d6d">
								<view class="label flex items-center">
									缴费金额:
								</view>
								<view class="contentText">
									{{ card.amount }}
								</view>
							</view> -->
							<view v-if="card.creater_id" class="flex marginBottom-10 fontSize-27 color-6d6d6d">
								<view class="label flex items-center">
									缴费人:
								</view>
								<view class="contentText">
									{{ card.creater_id }}
								</view>
							</view>
							<view
								v-if="card.preview_images && card.preview_images[0] && card.preview_images[0].url && card.preview_images[0].url != ''"
								class="flex marginBottom-10 fontSize-27 color-6d6d6d">
								<view class="label flex items-center">
									缴费配图:
								</view>
								<u--image @click="$u.throttle(previewImage(card.preview_images[0].url), 500)"
									width="60" height="60" :src="card.preview_images[0].url" radius="5"
									shape="square"></u--image>
							</view>
							
						</view>
						<!-- <view v-if="!pxrec || pxrec.length == 0"
							class="flex flex-center items-center" style="width: 100%;height: 100%;">
							<u-empty iconSize="60px" mode="search"></u-empty>
						</view> -->
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<u-popup bgColor="#fff" :round="10" :show="up_inspectShow" @close="up_inspectShow = false"
			@open="up_inspectShow = true">
			<view class="popupTreeBox">
				<view class="width-full fontSize-32 weight-700 flex flex-center color-333 items-center text-center">
					添加伴学
				</view>
				<view class="crads  box-sizing padding-30 ">
					<u--form labelPosition="left" :model="form" ref="uForm" :labelWidth="90">
						<u-form-item label="伴学时间" prop="inspect_time" borderBottom ref="item1" required
							@click="datetimeFun">
							<u--input :customStyle="{ 'pointer-events': 'none' }" v-model="form.inspect_time" disabled
								disabledColor="#ffffff" placeholder="请选择伴学时间" border="none"></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<u-form-item label="伴学结果" prop="inspect_result" borderBottom ref="item1">
							<u-radio-group v-model="form.inspect_result" placement="row">
								<u-radio name="较好" activeColor="red" label="较好"></u-radio>
								<u-radio name="一般" activeColor="red" label="一般"></u-radio>
								<u-radio name="较差" activeColor="red" label="较差"></u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="备注" prop="inspect_remarks" borderBottom ref="item1">
							<u--textarea v-model="form.inspect_remarks" placeholder="请输入备注"></u--textarea>
						</u-form-item>

					</u--form>
					<view class="width-full flex flex-center marginTop-30">
						<view class="up_inspectBtn flex flex-center items-center color-white text-center"
							@click="$u.throttle(up_inspect, 500)">
							提交
						</view>
					</view>

				</view>
			</view>
		</u-popup>
		<u-datetime-picker closeOnClickOverlay :show="datetimeShow" @confirm="datetimeClick" @close="dateClose"
			@cancel="dateClose" v-model="maxDate" mode="datetime" :minDate="minDate"
			:maxDate="maxDate"></u-datetime-picker>
		<!-- <u-calendar :minDate="minDate" :show="datetimeShow" closeOnClickOverlay @confirm="datetimeClick" @close="datetimeShow = false"></u-calendar> -->


	</view>
</template>

<script>
let minDate = ''
let maxDate = parseInt(new Date().getTime())
function returnTime(d) {
	let date = d ? new Date(d) : new Date
	let year = date.getFullYear();
	let month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + parseInt(date.getMonth() + 1);
	let day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
	let hour = date.getHours() > 9 ? date.getHours() : '0' + date.getHours();
	let minute = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes();
	let second = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds();
	minDate = parseInt(new Date(`${year}-${month}-${parseInt(day) - 3} ${hour}:${minute}:${second}`).getTime())
	return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
returnTime()
export default {
	data() {
		return {
			minDate,
			maxDate,
			defaultDate: null,
			triggered: {
				'0': false,
				'1': false,
				'2': false
			},
			attainmentData: {
				'1': [],//心理
				'2': []//习惯
			},
			isChange: {
				'1': false,
				'2': false
			},
			form: {
				inspect_result: '一般',
				inspect_time: '',
				inspect_remarks: ''
			},
			// xuemengdi
			datetimeShow: false,
			up_inspectShow: false,
			up_inspectInfo: {},
			unerInfo: {},
			sfType: false,
			current: 0,
			singoutShow: false,
			student_id: null,
			sjds: [],
			pxrec: [],
			pxrecExt: [],
			stuentInfo: {},
			contract_id:'',
			iconData: [
				//学法
				{
					id: 0,
					icon: 'clock',
					url: 'addAccompany',
					text: '能力'

				},
				{
					id: 1,
					icon: 'heart',
					url: 'mentality',
					text: '心理'
				},
				//陪学
				{
					id: 2,
					icon: 'plus-circle',
					url: 'mentality',
					text: '习惯'
				},

				{
					id: 3,
					icon: 'bell',
					url: '',
					text: '签离'
				},
				// {
				// 	id:3,
				// 	icon:'',
				// 	url:'addStudyMethod',
				// },
				// {
				// 	id:4,
				// 	icon:'',
				// 	url:'addStudyMethod',
				// }
			]

		};
	},
	onLoad(op) {
		this.student_id = op.student_id
		this.stuentInfo['student_id'] = op.student_id
		this.stuentInfo['name'] = op.name
		this.stuentInfo['learn_mode'] = op.learn_mode
		this.contract_id = op.contract_id
		uni.showLoading()
		
	},
	onShow() {
		this.isChange = {
			'1': false,
			'2': false
		}
		this.getRecord()
	},
	methods: {
		previewImage(img) {
			uni.previewImage({
				urls: img,
				longPressActions: {
					success: function (data) {
						// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function (err) {
						// console.log(err.errMsg);
					}
				}
			});
		},
		// 伴学
		up_inspectFun(t) {
			this.form.inspect_result = '一般'
			this.defaultDate = parseInt(new Date().getTime())
			// return
			this.form.inspect_time = returnTime()
			this.up_inspectInfo = { ...t }
			this.up_inspectShow = true
		},
		// 伴学提交
		up_inspect() {
			let param = {
				pxrec_id: this.up_inspectInfo.pxrec_id,
				inspect_time: this.form.inspect_time,
				inspect_result: this.form.inspect_result,
				inspect_remarks: this.form.inspect_remarks,
			}
			this.$home.up_inspect(param).then(res => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				console.log(res, 'cccccccccc')
				if (res.status == 200) {
					this.up_inspectShow = false
					this.getRecord()
				}
			}).catch(err => {
				uni.showToast({
					title: err.msg,
					icon: 'none'
				})
				console.log(err, 'errrrrrrrrrrrrrrrrrrrrr')
			})
		},
		datetimeFun() {
			this.up_inspectShow = false
			this.datetimeShow = true
		},
		dateClose() {
			this.up_inspectShow = true
			this.datetimeShow = false
		},
		datetimeClick(e) {
			this.form.inspect_time = returnTime(e.value)
			this.up_inspectShow = true
			this.datetimeShow = false
		},
		setCurrent(e) {
			this.$nextTick(() => {
				console.log(e, 3333333333333)
				this.current = e
			})
		},
		swiperChange(e) {
			console.log(e, 1111)
			this.current = e.detail.current
			if (e.detail.current != 0 && !this.isChange[e.detail.current]) {
				this.attainment()
			}
		},
		attainment() {
			this.$home.attainmentIndex({ student_id: this.student_id, type: this.current }).then(res => {
				console.log(res, 3333333)
				this.isChange[this.current] = true
				this.attainmentData[this.current] = res.data
				this.triggered[this.current + ''] = false
			}).catch(() => {
				this.triggered[this.current + ''] = false
			})
		},
		scrolltoupper() {
			this.triggered['0'] = true
			this.getRecord()
		},
		scrolltoupper1(e) {
			this.triggered[parseInt(e + 1) + ''] = true
			this.attainment()
			setTimeout(() => {
				this.triggered[parseInt(e + 1) + ''] = false
			}, 1000)
		},
		returnTime(v) {
			if (!v) return ''
			if (!this.sjds || !this.sjds[0]) return ''
			let val = ''
			let index = this.sjds[0].map(e => e.value).indexOf(v)
			index > -1 ? val = this.sjds[0][index].label : ''
			return val
		},
		// 获取陪学记录
		getRecord() {
			this.$home.financeIndex({ contract_id: this.contract_id }).then((res) => {
				if (res.data && res.data.length > 0) {
					this.pxrec = res.data?JSON.parse(JSON.stringify(res.data)):[];
					console.log(res,this.pxrec,88888888888888888)
				}
				this.triggered['0'] = false
				uni.hideLoading()
			}).catch(err => {
				this.triggered['0'] = false
				uni.hideLoading()
			})
			// 陪伴记录
			// this.$home.pxrecExt({student_id:this.student_id}).then((res)=>{
			// 	// this.pxrecExt = res.data
			// 	if(res.data&&res.data.length>0){
			// 		this.pxrecExt = res.data
			// 	}
			// })
		},
		iconClick(it) {
			if (it.url) {
				uni.navigateTo({
					url: `/pages/index/${it.url}?name=${this.stuentInfo.name}&student_id=${this.stuentInfo.student_id}&learn_mode=${this.stuentInfo.learn_mode}&type=${it.id}`
				})
			} else if (it.id == 3) {
				this.singoutShow = true

			}

		},
		singout() {
			this.$home.singout({ student_id: this.student_id }).then((res) => {
				this.singoutShow = false
				if (res.status == 200) {
					uni.showToast({
						title: '签离成功！',
						icon: 'none'
					})
				}
			})
		},
		to() {
			uni.navigateTo({
				url: `/pages/index/userDetails?student_id=${this.stuentInfo['student_id']}&name=${this.stuentInfo['name']}&learn_mode=${this.stuentInfo.learn_mode}`
			})
		}
	}
}
</script>

<style lang="scss">
.record {
	height: 100vh;
	box-sizing: border-box;

	.label {
		width: 130rpx;
	}

	.chouchaBtn {
		width: 150rpx;
		height: 50rpx;
		border-radius: 180rpx;
		background: linear-gradient(to right, #ffb1b1, #ff5600);
	}

	.up_inspectBtn {
		width: 80%;
		height: 80rpx;
		border-radius: 180rpx;
		background: linear-gradient(to right, #ffb1b1, #ff5600);
	}


	.contentText {
		flex: 1;
	}

	.imageSize {
		width: 60rpx;
		height: 60rpx;
	}

	.popupTreeBox {
		width: 100%;
		height: 60vh;
		padding-top: 50rpx;
		overflow-y: auto;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
	}

	.userTitle {
		width: 100%;
		height: 140rpx;
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		background-color: #fff;
		border-bottom: 1rpx solid #ededed;
	}

	.crads {
		width: 100%;

		// height: calc(100vh - 140rpx - 120rpx);
		// overflow-y: auto;
		.swiper {
			height: calc(100vh - 140rpx - 120rpx);

			.swiperItem {
				width: 100%;
				height: calc(100vh - 140rpx - 120rpx);
				// overflow-y: auto;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.card {
			margin: 0 auto 30rpx;
			width: calc(100% - 60rpx);
			color: #333;
		}

		.color-f6ffff {
			background-color: #f6ffff;
		}

		.color-fff8f6 {
			background-color: #fff8f6;
		}
	}

	.operation {
		width: 100%;
		height: 120rpx;
		background-color: #f7f7f7;

	}
}
</style>
